<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>hishion blog</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/blog/img/favicon.ico">
    <meta name="description" content="web front-end development engineer">
    <meta name="title" content="hishion blog">
    <meta name="keywords" content="小程序,Vue,uni-app,LESS/SCSS,Git">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/blog/assets/css/0.styles.85454e8d.css" as="style"><link rel="preload" href="/blog/assets/js/app.17d93a93.js" as="script"><link rel="preload" href="/blog/assets/js/2.d5810a70.js" as="script"><link rel="preload" href="/blog/assets/js/9.8d45fb33.js" as="script"><link rel="preload" href="/blog/assets/js/13.5647b041.js" as="script"><link rel="prefetch" href="/blog/assets/js/10.a2c8b9d7.js"><link rel="prefetch" href="/blog/assets/js/11.6316d0fd.js"><link rel="prefetch" href="/blog/assets/js/12.927e97fe.js"><link rel="prefetch" href="/blog/assets/js/14.2ae9363a.js"><link rel="prefetch" href="/blog/assets/js/15.00f0b12c.js"><link rel="prefetch" href="/blog/assets/js/16.cf70fbc0.js"><link rel="prefetch" href="/blog/assets/js/17.03f65a2a.js"><link rel="prefetch" href="/blog/assets/js/18.eab9c888.js"><link rel="prefetch" href="/blog/assets/js/19.41e2fb9c.js"><link rel="prefetch" href="/blog/assets/js/20.a81ff0d7.js"><link rel="prefetch" href="/blog/assets/js/21.8f4e6ef9.js"><link rel="prefetch" href="/blog/assets/js/22.33273307.js"><link rel="prefetch" href="/blog/assets/js/23.b9ccad42.js"><link rel="prefetch" href="/blog/assets/js/24.925b6f8f.js"><link rel="prefetch" href="/blog/assets/js/25.09121221.js"><link rel="prefetch" href="/blog/assets/js/26.93b4179f.js"><link rel="prefetch" href="/blog/assets/js/27.248627a6.js"><link rel="prefetch" href="/blog/assets/js/28.a76943a2.js"><link rel="prefetch" href="/blog/assets/js/29.56872daa.js"><link rel="prefetch" href="/blog/assets/js/3.c69e6cb7.js"><link rel="prefetch" href="/blog/assets/js/30.175b2658.js"><link rel="prefetch" href="/blog/assets/js/31.d027670c.js"><link rel="prefetch" href="/blog/assets/js/32.040794e0.js"><link rel="prefetch" href="/blog/assets/js/33.dd9eea2e.js"><link rel="prefetch" href="/blog/assets/js/34.2b31e291.js"><link rel="prefetch" href="/blog/assets/js/35.009bbce8.js"><link rel="prefetch" href="/blog/assets/js/36.ecb36989.js"><link rel="prefetch" href="/blog/assets/js/37.282a8534.js"><link rel="prefetch" href="/blog/assets/js/38.e29d954d.js"><link rel="prefetch" href="/blog/assets/js/39.e071deb9.js"><link rel="prefetch" href="/blog/assets/js/4.20ff38eb.js"><link rel="prefetch" href="/blog/assets/js/40.e30e040e.js"><link rel="prefetch" href="/blog/assets/js/41.f9beaf4c.js"><link rel="prefetch" href="/blog/assets/js/42.631fa7df.js"><link rel="prefetch" href="/blog/assets/js/43.de052ada.js"><link rel="prefetch" href="/blog/assets/js/44.b9d90c8b.js"><link rel="prefetch" href="/blog/assets/js/45.9edc6da4.js"><link rel="prefetch" href="/blog/assets/js/46.43221d60.js"><link rel="prefetch" href="/blog/assets/js/47.70bd2046.js"><link rel="prefetch" href="/blog/assets/js/48.f2da250c.js"><link rel="prefetch" href="/blog/assets/js/49.db6466ad.js"><link rel="prefetch" href="/blog/assets/js/5.413bc4a0.js"><link rel="prefetch" href="/blog/assets/js/50.465c1401.js"><link rel="prefetch" href="/blog/assets/js/51.25711c0b.js"><link rel="prefetch" href="/blog/assets/js/52.c3dd4c01.js"><link rel="prefetch" href="/blog/assets/js/53.c398474b.js"><link rel="prefetch" href="/blog/assets/js/54.1ff939f2.js"><link rel="prefetch" href="/blog/assets/js/55.d00053e3.js"><link rel="prefetch" href="/blog/assets/js/56.4978060f.js"><link rel="prefetch" href="/blog/assets/js/57.b9b8c161.js"><link rel="prefetch" href="/blog/assets/js/58.d67ad12f.js"><link rel="prefetch" href="/blog/assets/js/59.3a1f358e.js"><link rel="prefetch" href="/blog/assets/js/6.747c84d7.js"><link rel="prefetch" href="/blog/assets/js/60.7b70acc9.js"><link rel="prefetch" href="/blog/assets/js/61.43c54fc8.js"><link rel="prefetch" href="/blog/assets/js/62.d27744a0.js"><link rel="prefetch" href="/blog/assets/js/63.73378bfc.js"><link rel="prefetch" href="/blog/assets/js/64.060c996e.js"><link rel="prefetch" href="/blog/assets/js/65.747c9a84.js"><link rel="prefetch" href="/blog/assets/js/66.2a577ef9.js"><link rel="prefetch" href="/blog/assets/js/67.94620d6a.js"><link rel="prefetch" href="/blog/assets/js/68.3cf29532.js"><link rel="prefetch" href="/blog/assets/js/69.9e992128.js"><link rel="prefetch" href="/blog/assets/js/7.7a113c37.js"><link rel="prefetch" href="/blog/assets/js/70.0bf5d79a.js"><link rel="prefetch" href="/blog/assets/js/71.3c940d64.js"><link rel="prefetch" href="/blog/assets/js/72.b39fd551.js"><link rel="prefetch" href="/blog/assets/js/73.b22cb822.js"><link rel="prefetch" href="/blog/assets/js/74.f06bc4d1.js"><link rel="prefetch" href="/blog/assets/js/75.b7bdb0f0.js"><link rel="prefetch" href="/blog/assets/js/76.1dab014e.js"><link rel="prefetch" href="/blog/assets/js/77.7edba438.js"><link rel="prefetch" href="/blog/assets/js/8.eb2c369b.js">
    <link rel="stylesheet" href="/blog/assets/css/0.styles.85454e8d.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/blog/" class="home-link router-link-active"><!----> <span class="site-name">hishion blog</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/blog/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文章" class="dropdown-title"><span class="title">文章</span> <span class="arrow down"></span></button> <button type="button" aria-label="文章" class="mobile-dropdown-title"><span class="title">文章</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/basic/" class="nav-link">
  前端基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/mp/" class="nav-link">
  小程序
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/blog/uni/life.html" class="nav-link">
  uni-app
</a></li><li class="dropdown-item"><!----> <a href="/blog/scss/" class="nav-link">
  SCSS/LESS
</a></li><li class="dropdown-item"><!----> <a href="/blog/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/blog/standard/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  前端编码规范
</a></li><li class="dropdown-item"><!----> <a href="/blog/tool/" class="nav-link">
  工具
</a></li><li class="dropdown-item"><!----> <a href="/blog/http/" class="nav-link">
  网络
</a></li><li class="dropdown-item"><!----> <a href="/blog/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/blog/graphql/" class="nav-link">
  GraphQL
</a></li><li class="dropdown-item"><!----> <a href="/blog/other/" class="nav-link">
  其他
</a></li></ul></div></div><div class="nav-item"><a href="https://gitee.com/hishion.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/weixisheng" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/blog/" class="nav-link">
  首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="文章" class="dropdown-title"><span class="title">文章</span> <span class="arrow down"></span></button> <button type="button" aria-label="文章" class="mobile-dropdown-title"><span class="title">文章</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/blog/basic/" class="nav-link">
  前端基础
</a></li><li class="dropdown-item"><!----> <a href="/blog/mp/" class="nav-link">
  小程序
</a></li><li class="dropdown-item"><!----> <a href="/blog/vue/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/blog/uni/life.html" class="nav-link">
  uni-app
</a></li><li class="dropdown-item"><!----> <a href="/blog/scss/" class="nav-link">
  SCSS/LESS
</a></li><li class="dropdown-item"><!----> <a href="/blog/git/" class="nav-link">
  Git
</a></li><li class="dropdown-item"><!----> <a href="/blog/standard/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  前端编码规范
</a></li><li class="dropdown-item"><!----> <a href="/blog/tool/" class="nav-link">
  工具
</a></li><li class="dropdown-item"><!----> <a href="/blog/http/" class="nav-link">
  网络
</a></li><li class="dropdown-item"><!----> <a href="/blog/linux/" class="nav-link">
  Linux
</a></li><li class="dropdown-item"><!----> <a href="/blog/graphql/" class="nav-link">
  GraphQL
</a></li><li class="dropdown-item"><!----> <a href="/blog/other/" class="nav-link">
  其他
</a></li></ul></div></div><div class="nav-item"><a href="https://gitee.com/hishion.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://github.com/weixisheng" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>前端基础</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>SCSS/LESS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Git知识</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>前端规范</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/blog/standard/" aria-current="page" class="active sidebar-link">前端规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/standard/#命名规范" class="sidebar-link">命名规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/standard/#通用命名" class="sidebar-link">通用命名</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#目录文件命名" class="sidebar-link">目录文件命名</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#html命名" class="sidebar-link">HTML命名</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#js命名" class="sidebar-link">JS命名</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#css命名" class="sidebar-link">CSS命名</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#vue命名" class="sidebar-link">Vue命名</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/standard/#html规范" class="sidebar-link">HTML规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/standard/#格式规范" class="sidebar-link">格式规范</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#语言规范" class="sidebar-link">语言规范</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#注释规范" class="sidebar-link">注释规范</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/standard/#js规范" class="sidebar-link">JS规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/standard/#格式规范-2" class="sidebar-link">格式规范</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#语言规范-2" class="sidebar-link">语言规范</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#注释规范-2" class="sidebar-link">注释规范</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/standard/#css规范" class="sidebar-link">CSS规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/standard/#格式规范-3" class="sidebar-link">格式规范</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#语言规范-3" class="sidebar-link">语言规范</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/standard/#vue规范" class="sidebar-link">Vue规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/standard/#格式规范-4" class="sidebar-link">格式规范</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#语言规范-4" class="sidebar-link">语言规范</a></li></ul></li><li class="sidebar-sub-header"><a href="/blog/standard/#uni-app规范" class="sidebar-link">uni-app规范</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/blog/standard/#格式规范-5" class="sidebar-link">格式规范</a></li><li class="sidebar-sub-header"><a href="/blog/standard/#语言规范-5" class="sidebar-link">语言规范</a></li></ul></li></ul></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>工具</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Linux知识</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>GraphQL</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>网络知识</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><div class="custom-block tip"><p class="custom-block-title">前端编码规范</p> <p>旨在增强团队协作、提高代码质量，保持代码最大程度的一致性、降低维护代码的成本。</p></div> <h2 id="命名规范"><a href="#命名规范" class="header-anchor">#</a> 命名规范</h2> <p>约定前端项目中合法的命名格式有以下4种（后续提及命名风格时直接以英文展示）：</p> <ol><li><code>camelCase</code>: 小驼峰式命名</li> <li><code>PascalCase</code>: 大驼峰式命名</li> <li><code>kebab-case</code>: 短横线连接式命名</li> <li><code>CONSTANT_CASE</code>: 全大写下划线式命名
<img src="/blog/assets/img/standard-name.2a491529.png" width="600"></li></ol> <h3 id="通用命名"><a href="#通用命名" class="header-anchor">#</a> 通用命名</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>命名禁止使用拼音与英文混合的方式，更不允许直接使用中文的方式。 
</li></ol> <p>😐说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免。</p> <p>😊正例：<code>discount</code> / <code>seckill</code> / <code>rmb</code> （国际通用的名称可视为英文）</p> <p>😨反例：<code>dazhe</code> [打折] / <code>miaosha</code> [秒杀]</p> <ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>使用完整的单词组合来表达，名称具有语义性，可以体现功能。
</li></ol> <p>😐说明：代码要避免不规范的缩写和随意命名，严重降低了代码的可阅读性。</p> <p>😊正例：<code>function dateFormat() {}</code> / <code>let orderCount = 1</code> / <code>class=&quot;user-avatar&quot;</code></p> <p>😨反例：<code>function a() {}</code> / <code>let b = 1</code> / <code>class=&quot;c&quot;</code></p> <ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>禁止使用特殊字符命名。
</li></ol> <p>😨反例：<code>user&amp;</code> / <code>user&lt;</code> / <code>user&quot;</code></p> <ol start="4"><li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>代码中变量、函数和参数等不要使用保留关键字。
</li> <li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>不要使用和广告挂钩的单词做样式和页面路径，因为有些浏览器插件（Chrome的广告拦截插件等）可能会过滤这些命名，导致页面访问异常。
</li></ol> <p>😨反例：<code>ad</code> / <code>banner</code> / <code>gg</code> / <code>guanggao</code></p> <ol start="6"><li><span class="base-tag--info base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>建议</span></span>项目中使用增删改查、详情等功能时，统一使用以下单词
<ul><li><code>add</code>: 新增/添加/创建，如<code>views/product/add</code>, <code>views/shop/add-product</code></li> <li><code>edit</code>: 编辑/修改，如<code>views/product/edit</code>, <code>views/shop/edit-product</code></li> <li><code>delete</code>: 删除，如<code>views/product/delete</code>, <code>views/shop/delete-product</code></li> <li><code>detail</code>: 详情/明细，如<code>views/product/detail</code>, <code>views/shop/product-detail</code></li> <li><code>list</code>: 查询列表/记录，如<code>views/product/list</code>, <code>views/shop/product-list</code></li></ul></li></ol> <h3 id="目录文件命名"><a href="#目录文件命名" class="header-anchor">#</a> 目录文件命名</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>项目命名采用<code>kebab-case</code>命名，最好能体现项目特色。
</li></ol> <p>😐说明：利用项目中的主要功能特点，结合项目终端类型命名，可以更好归类项目。</p> <p>😊正例：<code>salesman-admin</code>（业务员后台管理系统） / <code>salesman-mp</code>（业务员小程序）</p> <p>😨反例：<code>saleAdmin</code> / <code>SaleMp</code> / <code>sale_admin</code> / <code>my-project</code></p> <ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>目录/文件夹命名采用<code>kebab-case</code>命名，有复数结构时，要采用复数命名法，普遍认同的目录名称不用复数。
</li></ol> <p>😐说明：这些目录无需遵循复数命名风格：<code>src</code> / <code>store</code> / <code>router</code> / <code>static</code> / <code>config</code> / <code>api</code> / <code>wxs</code></p> <p>😊正例：<code>styles</code> / <code>utils</code> / <code>assets</code> / <code>common-setting</code></p> <p>😨反例：<code>style</code> / <code>util</code> / <code>img</code></p> <ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>文件命名采用<code>kebab-case</code>命名，体现文件代表的功能和特点等。
</li></ol> <p>😐说明：项目中所有文件，包括js/ts、css/stylus/less/scss、html/vue和图片等。</p> <p>😊正例：<code>time-mixin.js</code> / <code>product-detail.scss</code> / <code>none-data.vue</code></p> <p>😨反例：<code>a.js</code> / <code>birthdayPackage.vue</code> / <code>BaseAvatar.png</code></p> <ol start="4"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>除了需要动态适配的文件，其他文件不得简单添加数字、字母等非语义性字符区分。
</li></ol> <p>😐说明：可能有些图片是区分主题的，例如theme为1,2,3...，这样图片路径可以动态拼接src=<code>static/logo-${theme}.png</code>，为此不做限制。</p> <p>😊正例：<code>auth-btn.vue</code> / <code>middle-btn.vue</code> / <code>user.js</code></p> <p>😨反例：<code>btn1.vue</code> / <code>btn2.vue</code> / <code>btn-copy.vue</code> / <code>api1.js</code> / <code>api-t.js</code></p> <h3 id="html命名"><a href="#html命名" class="header-anchor">#</a> HTML命名</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>标签名、类名、标签属性和属性值统一采用小写。
</li></ol> <p>😐说明：虽然HTML语言不区分大小写，但是小写看起来更纯净，统一采用小写。</p> <ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>id属性值保持唯一，即在整个HTML范围内只能出现一次。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>topHeader<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>bottomHeader<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>😨反例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>topHeader<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>topHeader<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>标签的自定义属性以data- 开头。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>home-page<span class="token punctuation">&quot;</span></span> <span class="token attr-name">data-theme</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dark<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="js命名"><a href="#js命名" class="header-anchor">#</a> JS命名</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>JS中的类和构造函数采用<code>PascalCase</code>命名。
</li></ol> <p>😊正例：<code>function Request() {}</code> / <code>class Request {}</code></p> <p>😨反例：<code>function request() {}</code> / <code>class request {}</code></p> <ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>JS中的变量、函数、方法名、参数名采用<code>camelCase</code>命名。
</li></ol> <p>😐说明：因为接口传参的字段和返回的字段不一定遵从<code>camelCase</code>命名，与接口对接的字段可以原样保存，除此之外一律采用<code>camelCase</code>命名。</p> <p>😊正例：<code>btnLoading</code> / <code>function getData(pageSize) {}</code></p> <p>😨反例：<code>BtnLoading</code> / <code>fucntion getdata(PageSize) {}</code></p> <ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>JS中的常量采用<code>CONSTANT_CASE</code>命名。
</li></ol> <p>😐说明：常量名力求语义表达清楚、完整，不用担心名称过长，使用<code>const</code>声明。</p> <p>😊正例：<code>COUNTDOWN_TIME</code> / <code>MAX_STOCK_COUNT</code></p> <p>😨反例：<code>count_time</code> / <code>MAX_COUNT</code></p> <ol start="4"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>项目中的请求采用<code>camelCase</code>命名，并且以 <code>api</code> 为前缀。
</li></ol> <p>😐说明：API请求稍微特殊一点，如果采用<code>camelCase</code>命名，可能会跟页面中的变量、方法混淆，通过特定格式<code>apiXxYy</code>更容易区分。</p> <p>😊正例：<code>apiGetUserInfo</code></p> <p>😨反例：<code>getUserInfo</code> / <code>MyInfo</code> / <code>my_detailInfo</code></p> <h3 id="css命名"><a href="#css命名" class="header-anchor">#</a> CSS命名</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>CSS中类名采用<code>kebab-case</code>命名。
</li></ol> <p>😊正例：<code>class=&quot;user-avtar&quot;</code></p> <p>😨反例：<code>class=&quot;my_header&quot;</code> / <code>class=&quot;myHeader&quot;</code> / <code>class=&quot;MyHeader&quot;</code></p> <ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>CSS中id采用<code>camelCase</code>命名。
</li></ol> <p>😊正例：<code>id = “userAvatar&quot;</code></p> <ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>scss中的变量、mixin采用<code>kebab-case</code>命名。
</li></ol> <p>😊正例：<code>$state-prefix</code> / <code>@mixin scroll-bar</code></p> <ol start="4"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>scss中的函数采用<code>camelCase</code>命名。
</li></ol> <p>😊正例：<code>@function containWhenFlag() {}</code></p> <h3 id="vue命名"><a href="#vue命名" class="header-anchor">#</a> Vue命名</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>组件name为多个单词，采用<code>PascalCase</code>命名。
</li></ol> <p>😐说明：HTML元素都是单个单词，组件name使用多个单词的组合，可以避免跟现有的以及未来的HTML元素冲突。</p> <ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>在使用组件的地方统一采用<code>kebab-case</code>命名。
</li></ol> <p>😐说明：由于HTML大小写不敏感，而且在单文件组件、字符串模板和DOM模板，需要区分组件名，为此统一约定采用<code>kebab-case</code>命名。</p> <ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>prop声明采用<code>camelCase</code>命名，在template中使用时属性采用<code>kebab-case</code>命名。
</li></ol> <p>😐说明：单纯遵循每个语言的约定，JavaScript中更自然的是<code>camelCase</code>，而在HTML中是<code>kebab-case</code>。</p> <p>😊正例：（涉及1-3点）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// components/md-table.vue</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'MdTable'</span><span class="token punctuation">,</span> <span class="token comment">// 1.组件名PascalCase</span>
  props<span class="token operator">:</span> <span class="token punctuation">{</span>
    tableLoading<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 3.prop声明camelCase</span>
      type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
      <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// test.vue </span>
<span class="token comment">// 2.组件使用kebab-case 3.属性kebab-case</span>
<span class="token operator">&lt;</span>md<span class="token operator">-</span>table <span class="token operator">:</span>table<span class="token operator">-</span>loading<span class="token operator">=</span><span class="token string">&quot;tableLoading&quot;</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>md<span class="token operator">-</span>table<span class="token operator">&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><ol start="4"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>Prop声明不要使用保留关键字和<code>data</code> / <code>methods</code>等Vue选项名称。
</li></ol> <p>😐说明：Prop不能使用关键字，与Vue选项相同会有覆盖的风险。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>value<span class="token operator">:</span> <span class="token punctuation">{</span>
  type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
  <span class="token keyword">default</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>data<span class="token operator">:</span> <span class="token punctuation">{</span>
  type<span class="token operator">:</span> Object<span class="token punctuation">,</span>
  <span class="token keyword">default</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ol start="5"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>vue中的引用（<code>ref</code>）采用<code>camelCase</code>命名。
</li></ol> <p>😐说明：ref被用来给元素或子组件注册引用信息，绑定在父组件的refs对象中，根据引用使用在DOM元素或子组件，引用指向DOM元素或子组件实例。当ref与<code>v-for</code>结合时，引用是一个数组。</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- this.$refs.testTag 包含三个数组实例--&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>i in 3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>testTag<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>i<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>success<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
   test tag
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="6"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>路由path采用<code>kebab-case</code>命名。
</li></ol> <p>😐说明：尽量和vue文件的目录结构保持一致，path和文件名都是<code>kebab-case</code>，这样方便查找文件。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// router.js</span>
path<span class="token operator">:</span> <span class="token string">'/shop/product-list'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="7"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>路由<code>name</code>采用<code>PascalCase</code>命名。
</li></ol> <p>😐说明：一般情况下与所对应的<code>.vue</code>文件中的<code>name</code>字段保持一致。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><br><div class="highlighted"> </div><br><br><br><br><br><div class="highlighted"> </div><br><br><br></div><pre class="language-js"><code><span class="token comment">// product-list.vue</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'ProductList'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// router.js</span>
<span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">'/shop/product-list'</span><span class="token punctuation">,</span>
  name<span class="token operator">:</span> <span class="token string">'ProductList'</span><span class="token punctuation">,</span>
  <span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/shop/product-list.vue'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="8"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span> uni-app项目页面路径采用<code>kebab-case</code>命名，对应`page.json`的<code>path</code>配置。
</li></ol> <p>😊正例：</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token comment">// page.json</span>
<span class="token punctuation">{</span>
  <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/member/card-list&quot;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h2 id="html规范"><a href="#html规范" class="header-anchor">#</a> HTML规范</h2> <p>HTML规范适用于普通html文件、Vue里面的template模板和小程序的WXML文件。</p> <h3 id="格式规范"><a href="#格式规范" class="header-anchor">#</a> 格式规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>标签必须嵌套正确，统一使用2个空格缩进。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>标签必须合法且闭合，空元素和没有内容的组件自闭合。
</li></ol> <p>😐说明：常见的HTML空元素：<code>img</code> / <code>input</code> / <code>link</code> / <code>meta</code> 。</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>my-component</span> <span class="token punctuation">/&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>元素属性值使用双引号（&quot;）包括，boolean类型的属性可不加属性值。
</li></ol> <p>😐说明：boolean属性不加属性值，默认生效，如需动态切换还是需要书写完整。</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">plain</span><span class="token punctuation">&gt;</span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>danger<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:loading</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btnLoading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="4"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>使用空行分隔大型或逻辑代码块。
</li></ol> <p>😐说明：为了提高可读性，可以根据页面中的功能模块，用一个空行分隔。</p> <ol start="5"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>单行代码字符不要超过80，超过三个属性换行。
</li></ol> <p>😐说明：每个属性单独一行，这样更清晰、易阅读。</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-date-picker</span>
   <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>form.time<span class="token punctuation">&quot;</span></span>
   <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>date<span class="token punctuation">&quot;</span></span>
   <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>选择日期<span class="token punctuation">&quot;</span></span>
   <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w-300<span class="token punctuation">&quot;</span></span>
<span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-date-picker</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h3 id="语言规范"><a href="#语言规范" class="header-anchor">#</a> 语言规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>html文件必须加上DOCTYPE声明，并统一使用HTML5的文档类型声明
</li></ol> <p><code>&lt;!DOCTYPE html&gt;</code>。同时声明页面语言<code>&lt;html lang=&quot;zh-CN&quot;&gt;</code>，字符集<code>&lt;meta charset=&quot;UTF-8&quot;&gt;</code>。</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>zh-CN<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><ol start="2"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>标签尽量保证语义性，减少标签数量，DOM节点过多会影响页面渲染。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>header</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>header</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>main</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>nav</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>nav</span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>section</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>section</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>main</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>footer</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>footer</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>😨反例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>header<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="3"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>使用 <code>class</code> 选择器实现样式，避免 <code>id</code> 和标签等选择器强耦合。
</li></ol> <h3 id="注释规范"><a href="#注释规范" class="header-anchor">#</a> 注释规范</h3> <p>HTML注释语法为<code>&lt;!-- 注释内容 --&gt;</code>。在<code>&lt;!--</code>之后增加一个空格，在<code>--&gt;</code>之前增加一个空格。</p> <ol><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>页面一个完整的功能、模块增加相关说明。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 优惠券 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>coupon-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>功能、模块代码较多的，可以标注起始段和结束段。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token comment">&lt;!-- 秒杀 开始 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>seckill-container<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  ...
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 秒杀 结束 --&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="js规范"><a href="#js规范" class="header-anchor">#</a> JS规范</h2> <h3 id="格式规范-2"><a href="#格式规范-2" class="header-anchor">#</a> 格式规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>使用2个空格缩进。
</li> <li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>单行代码字符不要超过80，超出需拆分多行，提高代码可读性和可维护性。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span> bar<span class="token operator">:</span> <span class="token string">'This is a bar.'</span><span class="token punctuation">,</span> <span class="token string">'baz'</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string">'qux'</span><span class="token operator">:</span> <span class="token string">'This is a qux'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">'difficult'</span><span class="token operator">:</span> <span class="token string">'to read'</span> <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span>
  bar<span class="token operator">:</span> <span class="token string">'This is a bar.'</span><span class="token punctuation">,</span>
  baz<span class="token operator">:</span> <span class="token punctuation">{</span> qux<span class="token operator">:</span> <span class="token string">'This is a qux'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  easier<span class="token operator">:</span> <span class="token string">'to read'</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>代码后面无需加分号（;）。
</li></ol> <p>😐说明：当JavaScript遇见一个没有分号的换行符时，JavaScript引擎会使用自动分号插入规则（<code>automatic semicolon insertion</code>）视换行符为结束。特殊语法需要添加分号，防止报错，常见的场景有：三目表达式函数前面的语句，解构赋值括号前。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><div class="highlight-lines"><br><div class="highlighted"> </div><br><br><div class="highlighted"> </div><br></div><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">checkTimes</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>btnLoading <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
<span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>isAdd <span class="token operator">?</span> <span class="token constant">API_APPOINTMENT_ADD</span> <span class="token operator">:</span> <span class="token constant">API_APPOINTMENT_EDIT</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token punctuation">;</span><span class="token punctuation">(</span><span class="token punctuation">{</span> result<span class="token punctuation">,</span> msg <span class="token punctuation">}</span> <span class="token operator">=</span> rules<span class="token punctuation">[</span>check<span class="token punctuation">]</span><span class="token punctuation">(</span>val<span class="token punctuation">,</span> errMsg<span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="4"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>统一使用单引号（<code>'</code>）定义字符串，而不是双引号（<code>&quot;</code>）。
</li></ol> <p>😐说明：ES6中模板字符串的反引号（`）也是支持的，但推荐在包含插值或换行时使用。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token string">''</span>
<span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>msg<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token string">&quot;&quot;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="5"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>大括号风格。如果大括号内容为空，可以{}表示，无需换行；如果非空则左大括号前不换行，左大括号后换行；右大括号前换行，右大括号后还有else等代码块不换行，表示终止的右大括号必须换行。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>firstName <span class="token operator">===</span> <span class="token string">'hello'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstName<span class="token punctuation">)</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lastName<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 以及</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>firstName <span class="token operator">===</span> <span class="token string">'hello'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span>
<span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lastName<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span>firstName <span class="token operator">===</span> <span class="token string">'hello'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstName<span class="token punctuation">)</span>
<span class="token punctuation">}</span> 
<span class="token keyword">else</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lastName<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token comment">// 以及</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>firstName <span class="token operator">===</span> <span class="token string">'hello'</span><span class="token punctuation">)</span> 
<span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstName<span class="token punctuation">)</span>
<span class="token punctuation">}</span> 
<span class="token keyword">else</span> 
<span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lastName<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="6"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>统一空格维持一致性。
</li></ol> <p>😐说明：以下几种情况需要添加空格</p> <p>（1）算数运算符（<code>+ - * / %</code>）、赋值运算符（<code>= += -= *= /= %=</code>）、比较运算符（<code>== === != !== &gt; &lt; &gt;= &lt;= ?:</code>）、逻辑运算符（<code>&amp;&amp; || !</code>）的前后加一个空格</p> <p>（2）代码块左大括号（<code>{</code>）前加一个空格</p> <p>（3）关键词（<code>else while catch finally</code>）前加一个空格</p> <p>（4）对象的属性值前加一个空格</p> <p>（5）函数声明或函数表达式的左大括号（<code>{</code>）前加一个空格</p> <p>（6）关键词（<code>if else for while do switch case try catch finally return typeof</code>）后加一个空格</p> <p>（7）for循环分号（<code>;</code>）后面加一个空格</p> <p>（8）逗号前避免使用空格，逗号后面加一个空格</p> <p>😊正例：（涉及1-8点）</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 1.运算符前后加空格</span>
<span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName<span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span><span class="token comment">// 4.对象属性前加空格</span>
  lastName<span class="token operator">:</span> <span class="token string">'world'</span>
<span class="token punctuation">}</span>
<span class="token comment">// 5.函数声明 `{` 前加空格</span>
<span class="token comment">// 8.函数参数多个，逗号后加空格</span>
<span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 2.代码块 `{` 前加空格</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>firstName <span class="token operator">===</span> <span class="token string">'hello'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>firstName<span class="token punctuation">)</span>
    <span class="token comment">// 3.关键词前加空格</span>
    <span class="token comment">// 6.关键词后加空格</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>lastName<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token function">log</span><span class="token punctuation">(</span>person<span class="token punctuation">)</span>
<span class="token comment">// 7.for循环分号后加空格</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">&lt;</span> <span class="token number">5</span><span class="token punctuation">;</span> i<span class="token operator">++</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>i<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br></div></div><ol start="7"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>不使用拖尾逗号。
</li></ol> <p>😐说明：拖尾逗号可以使git差异更清洁，但是没有设置好babel编译选项的话，可能个别机型/浏览器会报错。统一约定在最后一个元素或属性不使用拖尾逗号。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName<span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span>
  lastName<span class="token operator">:</span> <span class="token string">'world'</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> languages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'React'</span><span class="token punctuation">,</span> <span class="token string">'Vue'</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> person <span class="token operator">=</span> <span class="token punctuation">{</span>
  firstName<span class="token operator">:</span> <span class="token string">'hello'</span><span class="token punctuation">,</span>
  lastName<span class="token operator">:</span> <span class="token string">'world'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> languages <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'React'</span><span class="token punctuation">,</span> <span class="token string">'Vue'</span><span class="token punctuation">,</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="8"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>不同逻辑、不同定义、不同业务代码之间插入一个空行，文件末尾插入一个空行。
</li></ol> <p>😐说明：通过空行在视觉上对代码进行分组，也能更方便地知道，后续新加的逻辑的所在位置。任何情形，没有必要插入多个空行进行分隔。</p> <h3 id="语言规范-2"><a href="#语言规范-2" class="header-anchor">#</a> 语言规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>变量必须先声明后使用，使用<code>let/const</code>替代<code>var</code>，而且<code>const</code>性能更佳。
</li></ol> <p>😐说明：优先使用const声明，如果需要重新赋值的，使用let声明。const声明可以避免因重新赋值导致的错误或产生难以理解的代码。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token string">''</span> 
<span class="token keyword">const</span> <span class="token constant">COUNTDOWN_TIME</span> <span class="token operator">=</span> <span class="token number">60</span>
<span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token string">''</span> 
<span class="token keyword">const</span> countdownTime <span class="token operator">=</span> <span class="token number">60</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>将所有的<code>import</code>语句放在所有非导入语句的最上边。
</li></ol> <p>😐说明：由于所有import被提前，保持它们在顶部是为了防止意外发生。</p> <ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>禁止随意使用<code>console</code>，大量使用<code>console</code>会有性能问题。
</li></ol> <p>😐说明：杜绝输出一些简单的日志仅用于判断某个逻辑是否执行，这些应该调试完删除。可以使用的地方：输出请求信息以便定位接口，输出捕获的异常信息。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">api</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">private</span> <span class="token function">handleSearch</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">getFindAppraiseList</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>page<span class="token punctuation">.</span>size<span class="token punctuation">)</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>filter<span class="token punctuation">,</span> <span class="token string">'111111'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>createTime<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="4"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>代码中禁止出现<code>debugger</code>等断点调试语句，这些应该调试完删除。
</li></ol> <p>😐说明：可以利用浏览器或调试工具的sources面板进行调试，且功能更强大。</p> <ol start="5"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>禁止使用<code>arguments</code>定义参数名称，且不要对参数赋值。
</li></ol> <p>😐说明：定义参数为arguments，会优先于函数给定范围的arguments对象。重新赋值参数会导致意外的行为，可以使用参数默认值语法。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter">name<span class="token punctuation">,</span> arguments</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
name <span class="token operator">=</span> <span class="token string">'prevent'</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="6"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>使用对象字面量语法创建对象、数组字面量创建数组。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> arr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ol start="7"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>不要直接使用<code>undefined</code>判断变量，通过<code>typeof</code>与<code>'undefined'</code>比较。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> name <span class="token operator">===</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>name <span class="token operator">===</span> <span class="token keyword">undefined</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="8"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>定时器任务（<code>setTimeout / setInterval</code>等）及时销毁。
</li></ol> <p>😐说明：非业务需要前提下，在页面隐藏、页面路由变化时销毁或暂停定时器任务，特别是setInterval，不然相关逻辑依旧在后台执行。</p> <ol start="9"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>函数里面的参数不要使用<code>arguments</code>，使用剩余运算符（...）。
</li></ol> <p>😐说明：arguments只是一个类数组，而剩余运算符是一个真正的数组。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> args <span class="token operator">=</span> Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
  <span class="token keyword">return</span> args<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item <span class="token operator">*</span> <span class="token number">2</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="10"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>使用对象属性的简洁表达式。
</li></ol> <p>😐说明：在对象直接写入变量和函数，作为属性和方法。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'hello'</span>
<span class="token keyword">const</span> language <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token punctuation">,</span>
  <span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> name <span class="token operator">=</span> <span class="token string">'hello'</span>
<span class="token keyword">const</span> language <span class="token operator">=</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> name<span class="token punctuation">,</span>
  <span class="token function-variable function">sayName</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="11"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>浅拷贝对象、数组时，或将一个类数组转换成一个数组时，使用扩展运算符（...）。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">NEW_OPTIONS</span> <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token operator">...</span><span class="token constant">DEFAULT_OPTIONS</span><span class="token punctuation">,</span> <span class="token operator">...</span>options <span class="token punctuation">}</span>

<span class="token keyword">const</span> copyArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>originArr<span class="token punctuation">]</span>

<span class="token keyword">const</span> elements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.item'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> nodes <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>elements<span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> <span class="token constant">NEW_OPTIONS</span> <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token constant">DEFAULT_OPTIONS</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span>
<span class="token comment">// 禁止直接操作源对象</span>
<span class="token keyword">const</span> <span class="token constant">NEW_OPTIONS</span> <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">assign</span><span class="token punctuation">(</span><span class="token constant">DEFAULT_OPTIONS</span><span class="token punctuation">,</span> options<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="12"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>在访问和使用对象的多个属性时，优先使用对象的解构。
</li></ol> <p>😐说明：解构可以避免为这些属性创建临时引用。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> <span class="token punctuation">{</span> firstName<span class="token punctuation">,</span> lastName <span class="token punctuation">}</span> <span class="token operator">=</span> user
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
<span class="token comment">// 更好</span>
<span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>firstName<span class="token punctuation">,</span> lastName<span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter">user</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> firstName <span class="token operator">=</span> user<span class="token punctuation">.</span>firstName
  <span class="token keyword">const</span> lastName <span class="token operator">=</span> user<span class="token punctuation">.</span>lastName
  <span class="token keyword">return</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>firstName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>lastName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="13"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>对于返回多个值的函数使用对象，而不是数组。
</li></ol> <p>😐说明：使用对象就可以随时添加新的属性或者改变属性的顺序，调用方不用修改。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">processInput</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 处理代码...</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> top<span class="token punctuation">,</span> bottom <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用者只选择他们需要的数据。</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> left<span class="token punctuation">,</span> top <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">processInput</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">function</span> <span class="token function">processInput</span><span class="token punctuation">(</span><span class="token parameter">input</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// 处理代码...</span>
  <span class="token keyword">return</span> <span class="token punctuation">[</span>left<span class="token punctuation">,</span> right<span class="token punctuation">,</span> top<span class="token punctuation">,</span> bottom<span class="token punctuation">]</span>
<span class="token punctuation">}</span>

<span class="token comment">// 调用者需要考虑返回数据的顺序。</span>
<span class="token keyword">const</span> <span class="token punctuation">[</span>left<span class="token punctuation">,</span> _<span class="token punctuation">,</span> top<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">processInput</span><span class="token punctuation">(</span>input<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="14"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>使用JS更高优先级的函数代替<code>for</code>、<code>for-in</code>或<code>for-of</code>循环。
</li></ol> <p>😐说明：使用map()、every()、some()、filter()、find()、findIndex()、reduce()...等遍历数组，若有需要，使用Object.keys()、Object.values()、Object.entries()迭代对象生成数组。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> numbers <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">]</span>

<span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span>
numbers<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">num</span> <span class="token operator">=&gt;</span> sum <span class="token operator">+=</span> num<span class="token punctuation">)</span>
<span class="token comment">// 更好</span>
<span class="token keyword">const</span> sum <span class="token operator">=</span> numbers<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">total<span class="token punctuation">,</span> num</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> total <span class="token operator">+</span> num<span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> sum <span class="token operator">=</span> <span class="token number">0</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">let</span> num <span class="token keyword">of</span> numbers</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  sum <span class="token operator">+=</span> num
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="15"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>使用严格比较运算符即<code>===</code>和<code>!==</code>，而不是<code>==</code>和<code>!=</code>。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">typeof</span> check <span class="token operator">===</span> <span class="token string">'function'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">typeof</span> check <span class="token operator">==</span> <span class="token string">'function'</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="16"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>函数设计应当遵循低耦合的基本原则，一个函数完成单一的逻辑，复杂的逻辑进一步抽取，特定算法等不可(适合)分割的逻辑除外。
</li> <li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>善于利用三元表达式、短路运算符等优化<code>if</code>条件判断。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>res <span class="token operator">=</span> status <span class="token operator">===</span> <span class="token number">200</span> <span class="token operator">?</span> <span class="token string">'成功'</span> <span class="token operator">:</span> <span class="token string">'失败'</span>
isValid <span class="token operator">&amp;&amp;</span> <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter">status <span class="token operator">===</span> <span class="token number">200</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  res <span class="token operator">=</span> <span class="token string">'成功'</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
  res <span class="token operator">=</span> <span class="token string">'失败'</span>
<span class="token punctuation">}</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter">isValid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">func</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="18"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>TypeScript中，声明函数、变量的类型，全局变量、函数、接口需先定义，书写内部空间和模块等声明文件(<code>*.d.ts</code>)。
</li> <li><span class="base-tag--info base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>建议</span></span>用好TypeScript的类型检查，尽量从根本原因解决一些警告和错误，而不是使用<code>// @ts-ignore</code>等跳过检验。
</li></ol> <h3 id="注释规范-2"><a href="#注释规范-2" class="header-anchor">#</a> 注释规范</h3> <p>JavaScript注释语法分为单行注释（<code>// 注释内容</code>）和多行注释（<code>/* 注释内容 */</code>）。</p> <p>😐说明：单行注释中，注释文字与<code>//</code>之间保留一个空格；多行注释建议在至少三行注释时使用，第一行为<code>/**</code>，最后为<code>*/</code>，中间行以<code>*</code>开始，注释文字与<code>*</code>之间保留一个空格。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 单行注释</span>

<span class="token comment">/**
 * 多行注释
 */</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>核心方法、业务逻辑强相关代码，添加注释，简述功能目的、入参出参（若有）等，采用多行注释。
</li></ol> <p>😐说明：代码本身是清晰的、可读性强的，可以无需注释。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
 * 防抖函数
 * @param delay 延迟 单位毫秒，默认300
 * @param options leading: true先调用后等待 trailing:true先等待后调用
 *                都为true则可以多次调用
 * @returns {Function}
 */</span>
<span class="token keyword">function</span> <span class="token function">Debounce</span><span class="token punctuation">(</span>
  <span class="token parameter">delay <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">,</span>
  options <span class="token operator">=</span> <span class="token punctuation">{</span> leading<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> trailing<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span></span>
<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="2"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>项目中封装的逻辑，增加使用说明，采用多行注释。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">/**
 * 规则封装
* e.g.:  mobile: [validate({ check: 'mobile', nullMsg: '请输入手机号' })]
 * @param required 是否必填，默认true
 * @param trigger 触发操作
 * @param nullMsg required=true时提示信息
 */</span>
<span class="token keyword">function</span> <span class="token function">validate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="3"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>业务逻辑使用的变量，增加说明，包括含义，可能出现的值，采用单行注释。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> popupType <span class="token operator">=</span> <span class="token number">1</span> <span class="token comment">// 弹窗类型 1.xx 2.yy</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="css规范"><a href="#css规范" class="header-anchor">#</a> CSS规范</h2> <h3 id="格式规范-3"><a href="#格式规范-3" class="header-anchor">#</a> 格式规范</h3> <ol><li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>使用2个空格缩进。
</li> <li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>每个属性声明以分号（;）结尾。
</li> <li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>统一使用展开格式，每个选择器及属性单独一行。
</li> <li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>使用多个选择器时，每个选择器单独一行，逗号在前一个选择器末尾。
</li> <li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>每个规则集包含在大括号里（{}），左大括号不换行，右大括号换行。
</li> <li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>统一空格维持一致性。
</li></ol> <p>😐说明：以下几种情况需要添加空格</p> <p>（1）属性值前</p> <p>（2）选择器（<code>&gt; + ~</code>）前后</p> <p>（3）左大括号（<code>{</code>）前</p> <p>（4）<code>!important</code>前</p> <ol start="7"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>样式选择器、属性名、属性值关键词全部小写。
</li></ol> <p>😊正例：（涉及1-7点）</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.el-input,
.el-radio</span> <span class="token punctuation">{</span>
  color<span class="token punctuation">:</span> #333<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>😨反例：</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.el-input,.el-radio</span><span class="token punctuation">{</span>
  color<span class="token punctuation">:</span>#333<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="8"><li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>不允许存在空的规则，重复的规则。
</li> <li><span class="mb-5 base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>去掉小数前面的0，去掉数字中不必要的小数点和0。
</li> <li><span class="mb-5 base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>去掉属性值0后面的单位。
</li> <li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>颜色使用16进制小写字母，尽量简写。
</li></ol> <p>😊正例：（涉及8-11点）</p> <div class="language-css line-numbers-mode"><pre class="language-css"><code><span class="token selector">.test</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>

  <span class="token property">color</span><span class="token punctuation">:</span> #f40<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> .1<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><p>😨反例：</p> <div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token selector">.test </span><span class="token punctuation">{</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #FF4400<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.1<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 16.0px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.header </span><span class="token punctuation">{</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><ol start="12"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>SCSS中使用<code>@include</code>时，放在普通属性后面。如果有嵌套选择器，空一行再定义嵌套选择器。
</li></ol> <p>😊正例：</p> <div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token selector">.el-input </span><span class="token punctuation">{</span>
  <span class="token property">border</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token keyword">@include</span> <span class="token function">round</span><span class="token punctuation">(</span>5px<span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token selector">input </span><span class="token punctuation">{</span>
    <span class="token property">font-size</span><span class="token punctuation">:</span> 14px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="13"><li><span class="base-tag--info base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>建议</span></span>如果了解属性值的顺序，而且需要设置几个属性值，可以采用简写。否则的话，分开书写更清晰。
</li></ol> <p>😊正例：</p> <div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token selector">.element </span><span class="token punctuation">{</span>
  <span class="token property">transition-delay</span><span class="token punctuation">:</span> 1s<span class="token punctuation">;</span>
  <span class="token property">transition-timing-function</span><span class="token punctuation">:</span> linear<span class="token punctuation">;</span>
  <span class="token property">transition-duration</span><span class="token punctuation">:</span> .5s<span class="token punctuation">;</span>
  <span class="token property">transition-property</span><span class="token punctuation">:</span> opacity<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 相当于</span>
<span class="token selector">.element </span><span class="token punctuation">{</span>
  <span class="token property">transition</span><span class="token punctuation">:</span> opacity .5s linear 1s<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><h3 id="语言规范-3"><a href="#语言规范-3" class="header-anchor">#</a> 语言规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>避免样式嵌套层级过深，最好限制在3级，CSS选择器的匹配是从右向左进行的。虽然页面层级可能嵌套很深，但是css不需要完全按照页面层级书写。
</li> <li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>公共样式写在<code>common.scss</code>，页面优先使用通用样式，特殊需要覆盖再重新书写。
</li></ol> <p>😊正例：</p> <div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token comment">// common.scss</span>
<span class="token selector">.tab-container </span><span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// test.vue &lt;style&gt;</span>
<span class="token selector">.tab-container </span><span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 54px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>尽量用class选择器，少用甚至不用id、标签和属性等选择器。
</li></ol> <p>😐说明：id选择器样式无法复用，同时防止开发过程中id名或标签名等变化，引起页面布局错乱。</p> <ol start="4"><li><span class="mb-5 base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>无需兼容低配机型和浏览器时，优先考虑使用flex布局，就算重排也会比inline-block和float快。
</li> <li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>定义<code>variable.scss</code>变量文件，然后在页面/组件等需要的地方采用引入的方式，可以方便整体控制应用的风格。
</li></ol> <p>😐说明：uni-app项目中存在一个uni.scss文件，页面/组件无需导入这个文件，在此定义的变量，页面/组件可直接使用变量。</p> <ol start="6"><li><span class="base-tag--info base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>建议</span></span>将相关属性顺序放在一组，提高代码可读性。
</li></ol> <p>😐说明：参考<a href="https://github.com/csscomb/csscomb.js/blob/master/config/yandex.json" target="_blank" rel="noopener noreferrer">CSScomb yandex<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>配置，建议遵循的顺序为</p> <p>（1）布局定位属性：position、display、float、flex等<br>
（2）盒子模型属性：box-sizing、width、height、margin、padding等<br>
（3）过渡动画属性：transition、animation等<br>
（4）文本属性：text-align、white-space、text-decoration等<br>
（5）外观属性：opacity、color、border、outline、background等<br>
（6）字体属性：font、font-size、line-height等</p> <ol start="7"><li><span class="base-tag--info base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>建议</span></span>根选择器限制唯一性，子选择器可以使用不同命名区分。
</li></ol> <p>😐说明：可选择BEM命名风格，格式为<code>[namespace-]block__element--modifier</code>，namespace一般为组件名称。</p> <h2 id="vue规范"><a href="#vue规范" class="header-anchor">#</a> Vue规范</h2> <p>Vue单文件分为template、script和style三大部分，分别参考HTML规范、JavaScript规范和CSS规范。Vue规范针对Vue2.x版本，除了遵循上述规范外，摘取Vue官方规范中必要的和强烈推荐的风格（更多的可以参考Vue风格指南），以及开发过程中的一些优化建议。</p> <h3 id="格式规范-4"><a href="#格式规范-4" class="header-anchor">#</a> 格式规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>单文件应该有统一的顺序。
</li></ol> <p>😐说明：单文件中应该让<code>&lt;template&gt;</code>、<code>&lt;script&gt;</code>和<code>&lt;style&gt;</code>标签保持顺序一致，且<code>&lt;style&gt;</code>放在最后，因为<code>&lt;style&gt;</code>是可选的。</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
 
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">

</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><ol start="2"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>选项应该有统一的顺序。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> name/parent
 components/directives/filters
 mixins
 inheritAttrs/model/props/propsData
 data/computed
 watch
 生命周期
 methods
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><ol start="3"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>生命周期顺序，按照它们被调用的顺序依次定义。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>beforeCreate --&gt; created --&gt; beforeMount --&gt; mounted
beforeUpdate --&gt; updated 
activated --&gt; deactivated --&gt; beforeDestory --&gt; destroyed
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>元素（含组件）的属性应该有统一的顺序。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>is
v-for
v-if/v-else-if/v-else/v-show/v-cloak
v-pre/v-once
id
ref/key
v-model
其他attribute:
  class
  name
  data-*
  src/for/type/href/value
  max-length/min-length/max/min/paterrn
  placeholader/title/alt
  aria-*/role
  required/readonly/disabled/checked/selectd
v-on 
v-html/v-text
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><ol start="5"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>样式顺序
</li></ol> <p>😐说明：style按导入（@import）、变量（$variable）、选择器的顺序书写。</p> <p>😊正例：</p> <div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token keyword">@import</span> <span class="token string">&quot;~@/styles/variable.scss&quot;</span><span class="token punctuation">;</span>
<span class="token property"><span class="token variable">$page</span></span><span class="token punctuation">:</span> home-page<span class="token punctuation">;</span>
<span class="token selector">.<span class="token variable">#{$page}</span> </span><span class="token punctuation">{</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="6"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>绑定语法（双大括号<code>{{}}</code>）内容左右两边添加一个空格。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ count }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>😨反例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-tag</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{count}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-tag</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="7"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>指令都使用缩写形式（ <code>:</code>表示<code>v-bind:</code>，<code>@</code>表示<code>v-on:</code>，<code>#</code>表示<code>v-slot:</code>）。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>md-table</span>
  <span class="token attr-name">:table-data</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tableData<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>headers<span class="token punctuation">&quot;</span></span>
  <span class="token attr-name">@getData</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>getTableData<span class="token punctuation">&quot;</span></span>
 <span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">#operate</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>primary<span class="token punctuation">&quot;</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mini<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>编辑<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-button</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>md-table</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h3 id="语言规范-4"><a href="#语言规范-4" class="header-anchor">#</a> 语言规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>组件的<code>data</code>必须是返回对象的函数。
</li></ol> <p>😐说明：除了使用new Vue的任何地方，都必须是返回函数的对象。因为直接使用一个对象，会使得这个组件的所有实例共享数据。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      headers<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>  data<span class="token operator">:</span> <span class="token punctuation">{</span>
      headers<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span><code>prop</code>定义尽量详细，必须指定类型，必须指定<code>required</code>或者<code>default</code>。如果有业务需要，必须加上<code>validator</code>验证。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>props<span class="token operator">:</span> <span class="token punctuation">{</span>
  tableLoading<span class="token operator">:</span> <span class="token punctuation">{</span>
    type<span class="token operator">:</span> Boolean<span class="token punctuation">,</span>
    <span class="token keyword">default</span><span class="token operator">:</span> <span class="token boolean">false</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>props<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'tableLoading'</span><span class="token punctuation">]</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol start="3"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>为<code>v-for</code>设置<code>key</code>属性，并且属性值是唯一的，有利于维护内部组件及其子树的状态。
</li></ol> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in 3<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    {{ item }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>😨反例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>el-option</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in 3<span class="token punctuation">&quot;</span></span>  <span class="token attr-name">:value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    {{ item }}
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>el-option</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><ol start="4"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span><code>v-for</code>和<code>v-if</code>不能用在同一个元素上。
</li></ol> <p>😐说明：Vue处理指令时，v-for比v-if优先级高，渲染时会遍历整个列表，然后进行v-if逻辑判断，影响性能。可以解耦渲染逻辑，提前v-if判断，或者先计算出符合v-if条件的数据再v-for。</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>isActiveUser<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in userList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.userId<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 或者 利用computed计算出activeUserList --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in activeUserList<span class="token punctuation">&quot;</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.userId<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>😨反例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span>
   <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item in userList<span class="token punctuation">&quot;</span></span>
   <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.isActive<span class="token punctuation">&quot;</span></span>
   <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item.userId<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="5"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>组件模板不要包含复杂表达式，应该重构为计算属性或方法。
</li></ol> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 模板内使用 {{ normalizedFullName }}</span>
computed<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token function">normalizedFullName</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">{</span><span class="token punctuation">{</span>
  fullName<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">word</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> word<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> word<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">' '</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ol start="6"><li><span class="mb-5 base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span><code>style</code>添加<code>scoped</code>属性，限制作用域，防止污染全局样式。
</li> <li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>data声明中对象层次不要超过4层。
</li></ol> <p>😐说明：对象嵌套太深一方面对性能有影响，因为Vue2.x版本是利用Object.defineProperty递归实现数据响应式变化的；另一方面获取某个属性值时不方便。</p> <p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      form<span class="token operator">:</span> <span class="token punctuation">{</span>
        person<span class="token operator">:</span> <span class="token punctuation">{</span>
          name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
          job<span class="token operator">:</span> <span class="token punctuation">{</span>
            title<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
            desc<span class="token operator">:</span> <span class="token string">''</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token comment">// this.form.person.job.title</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol start="8"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>利用<code>Object.freeze()</code>提升展示类数据渲染性能。
</li></ol> <p>😐说明：Object.freeze()可以冻结一个对象，冻结之后不能增加新属性，不能删除已有属性，不能修改属性值，不能更改对象配置。Vue赋值变量为一个冻结对象后，不会生成getter和setter劫持方法。对于纯展示类、无需变化的数据，可以使用，在数据量越大时性能提升越显著。Object.freeze()冻结的是值，仍然可以将变量的整个引用替换掉。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    list<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">async</span> <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">API_GET_LIST</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token operator">:</span> <span class="token punctuation">{</span>
  <span class="token keyword">async</span> <span class="token function">updateList</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> list <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token constant">API_POST_LIST</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>list <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">freeze</span><span class="token punctuation">(</span>list<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><ol start="9"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>应该把复杂的计算属性拆分多个且简单的计算属性。
</li></ol> <p>😐说明：不要在一个计算属性内包含太多逻辑，尽量拆分出几个功能相对单一的计算属性，最终组合成所需的计算属性。这样不仅易于测试和阅读，而且就算后期调整也更好重构。</p> <p>😊正例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">isValid</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">chooseAddress</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">let</span> chosedAddress <span class="token operator">=</span> <span class="token keyword">null</span>
     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span><span class="token punctuation">.</span>chooseAddressId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
          chosedAddress <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>
           item <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>Id <span class="token operator">===</span> <span class="token keyword">this</span><span class="token punctuation">.</span>chooseAddressId
        <span class="token punctuation">)</span>
     <span class="token punctuation">}</span>
     <span class="token keyword">return</span> chosedAddress <span class="token operator">||</span> <span class="token keyword">null</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">curAddress</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
     <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span><span class="token punctuation">.</span>isValid</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> defaultAddress <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>IsDefault<span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>chooseAddress <span class="token operator">||</span> defaultAddress <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
     <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>😨反例：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function">curAddress</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span><span class="token punctuation">.</span>addressList <span class="token operator">&amp;&amp;</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">.</span>length <span class="token operator">&gt;</span> <span class="token number">0</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> defaultAddress <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>IsDefault<span class="token punctuation">)</span>
    <span class="token keyword">let</span> chooseAddress <span class="token operator">=</span> <span class="token keyword">null</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token keyword">this</span><span class="token punctuation">.</span>chooseAddressId</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">const</span> chosedAddress <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>
        item <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>Id <span class="token operator">==</span> <span class="token keyword">this</span><span class="token punctuation">.</span>chooseAddressId
      <span class="token punctuation">)</span>
      chosedAddress <span class="token operator">&amp;&amp;</span> <span class="token punctuation">(</span>chooseAddress <span class="token operator">=</span> chosedAddress<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> chooseAddress <span class="token operator">||</span> defaultAddress <span class="token operator">||</span> <span class="token keyword">this</span><span class="token punctuation">.</span>addressList<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>
  <span class="token punctuation">}</span>
  <span class="token keyword">return</span> <span class="token keyword">null</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h2 id="uni-app规范"><a href="#uni-app规范" class="header-anchor">#</a> uni-app规范</h2> <p>以遵从Vue规范为前提，扩展uni-app特有规范。</p> <h3 id="格式规范-5"><a href="#格式规范-5" class="header-anchor">#</a> 格式规范</h3> <ol><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>生命周期按照它们被调用的顺序依次定义。
</li></ol> <p>（1）页面生命周期</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>onLoad
onShow
onReady
onHide
onUnload
onPullDownRefresh
onReachBottom
onTabItemTap
onShareAppMessage
onPageScroll
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><p>（2）组件生命周期</p> <p>😊正例：</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destroyed
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="语言规范-5"><a href="#语言规范-5" class="header-anchor">#</a> 语言规范</h3> <ol><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>优先使用<code>uni-app</code>组件元素，即<code>view</code>、<code>image</code>、<code>picker</code>等。
</li></ol> <p>😐说明：标签靠近微信小程序规范。不推荐使用HTML标签，实际上div等标签也会被编译器转化。但为了管理方便、策略统一，建议使用view等组件。</p> <ol start="2"><li><span class="base-tag--success base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>强制</span></span>接口能力（JS API）优先使用<code>uni</code>前缀。
</li></ol> <p>😐说明：接口能力靠近微信小程序规范，但是uni-app项目中需将wx前缀替换为uni。如果各个小程序平台有新功能而uni-app未兼容的，可以使用各平台的前缀。</p> <ol start="3"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span>条件编译解决各端差异。
</li></ol> <p>😐说明：uni-app已将常用的组件、JS API封装到框架中，保证了多平台兼容。但每个平台有一些特性，可能存在一些无法跨平台的情况。为此可以使用条件编译，将不同代码编译到不同平台。</p> <p>（1）条件编译是使用特殊注释语法作标记，以<code>#ifdef</code>（仅在某平台存在）或<code>#ifndef</code>（除了某平台均存在）加<code>PLATFORM</code>（平台名称，使用<code>||</code>分隔多个平台）开头，以<code>#endif</code>结尾。</p> <p>（2）不同语法有不同注释写法，js/ts/json使用 <code>// 注释</code>、SCSS使用 <code>/* 注释 */</code>、vue模板使用<code>&lt;!-- 注释 --&gt;</code>。</p> <p>（3）PLATFORM取值：APP-PLUS（APP）、H5、MP-WEIXIN（微信小程序）、MP-ALIPAY（支付宝小程序）、MP-BAIDU（百度小程序）、MP-TOUTIAO（字节跳动小程序）、MP-QQ、MP-360、MP（含各端小程序）、QUICKAPP-WEBVIEW（含联盟、华为快应用）、QUICKAPP-WEBVIEW-UNION（快应用联盟）、QUICKAPP-WEBVIEW-HUAWEI（快应用华为）</p> <p>（4）static目录可以通过新建不同平台的专有名称（PLATFORM取值小写），实现条件编译，这样静态资源只有特定平台才会编译进去。</p> <p>（5）在项目根目录创建platforms目录，进一步创建子目录（PLATFORM取值小写），存放不同平台的文件，实现整体目录的条件编译。目录下只支持放置页面文件（vue文件），其他资源建议使用static条件编译。</p> <p>😊正例：（涉及1-4点）</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code>// vue模板条件编译
<span class="token comment">&lt;!-- #ifdef MP-WEIXIN --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>official-account</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>official-account</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- #endif --&gt;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// js条件编译</span>
<span class="token comment">// #ifndef H5</span>
uni<span class="token punctuation">.</span><span class="token function">setClipboardData</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// #endif</span>
<span class="token comment">// #ifdef MP-WEIXIN MP-ALIPAY</span>
uni<span class="token punctuation">.</span><span class="token function">login</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// #endif</span>

<span class="token comment">// json条件编译</span>
<span class="token comment">// #ifdef MP</span>
<span class="token punctuation">{</span>
  <span class="token string">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;pages/index/auth&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;style&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;授权登录&quot;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token comment">// #endif</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><div class="language-scss line-numbers-mode"><pre class="language-scss"><code><span class="token comment">// SCSS条件编译</span>
<span class="token selector">.element </span><span class="token punctuation">{</span>
  <span class="token comment">/* #ifndef H5 */</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token comment">/* #endif */</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code>// static目录条件编译
|___static
|   |__mp-weixin
|       |__wx-logo.png
|   |__mp-alipay
|       |__ali-logo.png
|   |__common.png
|___main.js
|___App.vue
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><ol start="4"><li><span class="base-tag--primary base-tag--small base-tag" data-v-8599edd0><span class="text" data-v-8599edd0>推荐</span></span><code>scss</code>文件和<code>&lt;style&gt;</code>标签里面的背景图不使用本地图片。
</li></ol> <p>😐说明：不支持本地图片的平台（mp-weixin、mp-qq、mp-toutiao和app v2），小于40kb会转base64，H5平台小于4kb会转base64，其余平台不会。推荐统一上传至CDN。</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/blog/git/rename.html" class="prev">
        分支重命名
      </a></span> <span class="next"><a href="/blog/tool/">
        markdown语法
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/blog/assets/js/app.17d93a93.js" defer></script><script src="/blog/assets/js/2.d5810a70.js" defer></script><script src="/blog/assets/js/9.8d45fb33.js" defer></script><script src="/blog/assets/js/13.5647b041.js" defer></script>
  </body>
</html>
